<template>
  <div class="boxsty zhiBiao">
    <div :height="searchheight">
      <span
        style="float: right; margin-top: -30px; cursor: pointer"
        @click="searchchangeadvanced"
        >{{ searchadvanced ? "收起" : "展开" }}
        <i
          :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
        />
      </span>
      <div v-show="searchadvanced">
        <contractDetailHeader
          :contractDetailHeaderData="hetongzhibiaoTable.rows"
        ></contractDetailHeader>
      </div>
      <div v-show="searchadvanced">
        <el-form
          :inline="true"
          :model="dataForm"
          @keyup.enter.native="getDataList()"
          class="form-inline"
          v-if="showSearch"
        >
          <el-form-item label="指标名称">
            <el-input
              v-model="dataForm.zhibiaoName"
              placeholder="指标名称"
              :clearable="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="指标类别">
            <el-input
              v-model="dataForm.zhibiaoType"
              placeholder="指标类别"
              :clearable="true"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              class="marginLeft"
              @click="getDataList(1)"
              >检索
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="text-align: right">
      <div class="table-header-btn-box" v-if="lastPage == 'tbsh'">
        <el-button plain type="primary" @click="showZhibiaoTable"
          >指标库</el-button
        >
        <el-button
          plain
          type="primary"
          @click="tbshokAll"
          v-loading.fullscreen.lock="fullscreenLoading"
          >批量同意</el-button
        >
        <el-button
          plain
          type="primary"
          @click="tbshbackAll"
          v-loading.fullscreen.lock="fullscreenLoading2"
          >批量驳回</el-button
        >
        <el-button plain type="primary" @click="fnBackOldPage('返回合同创建')"
          >返回</el-button
        >
      </div>
      <div
        class="table-header-btn-box"
        v-if="lastPage == 'jghz' || lastPage == 'qtjc'"
      >
        <el-button type="primary" style="float: right">添加指标</el-button>
      </div>
    </div>
    <div class="avue-crud">
      <div class="flex border-top-theme" v-if="pageTitle == '业绩合同'">
        <div class="mt10">
        </div>
      </div>
      <el-table
        ref="tableRef"
        style="width: 100%; margin-top: 20px"
        :data="dataList"
        border
        v-loading="dataListLoading"
      >
        <el-table-column
          type="selection"
          width="55"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          type="index"
          width="80"
          header-align="center"
          align="center"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="shouyueName"
          header-align="center"
          align="center"
          min-width="120"
          label="受约人姓名"
        >
        </el-table-column>
        <el-table-column
          prop="zhibiaoType"
          header-align="center"
          align="center"
          min-width="100"
          label="指标类别"
        >
        </el-table-column>
        <el-table-column
          prop="zhibiaoName"
          header-align="center"
          align="center"
          min-width="180"
          show-overflow-tooltip
          label="指标名称"
        >
        </el-table-column>
        <el-table-column
          prop="weight"
          header-align="center"
          align="center"
          min-width="100"
          label="权重"
        >
        </el-table-column>
        <el-table-column
          prop="formulaId"
          label="计算公式"
          min-width="180"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.formulaId == null">无公式</span>
            <div v-else v-for="item in formulaOptions">
              <span v-if="item.id == scope.row.formulaId">{{ item.gsMc }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="targetValue"
          header-align="center"
          align="center"
          min-width="100"
          label="目标值"
        >
        </el-table-column>
        <el-table-column
          prop="unit"
          header-align="center"
          align="center"
          min-width="100"
          label="单位"
        >
        </el-table-column>
        <el-table-column
          prop="ytbSz"
          label="填报值(预)"
          min-width="120"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.contractAuditStatus == 12">
              <el-input
                v-model="scope.row.ytbSz"
                size="mini"
                placeholder="请输入内容"
                @change="saveProperty(scope.row, scope.$index)"
              />
            </span>
            <span v-else>{{ scope.row.ytbSz }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="tbSz"
          label="填报值"
          min-width="120"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.contractAuditStatus == 12">
              <el-input
                v-model="scope.row.tbSz"
                size="mini"
                placeholder="请输入内容"
                @change="saveProperty(scope.row, scope.$index)"
              />
            </span>
            <span v-else>{{ scope.row.tbSz }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="zbDf"
          header-align="center"
          align="center"
          min-width="100"
          label="得分"
        >
          <template slot-scope="scope">
            <span
              v-if="
                scope.row.contractAuditStatus == 12 ||
                scope.row.zhibiaoType == '奖惩类'
              "
            >
              <el-input
                v-model="scope.row.zbDf"
                placeholder="请输入内容"
                @change="saveProperty(scope.row, scope.$index)"
              />
            </span>
            <span v-else>
              <el-popover placement="left" width="300" trigger="hover">
                <p>考核得分：{{ scope.row.zbDf }}</p>
                <span
                  v-if="
                    scope.row.ytbSzfrac != null && scope.row.tbSzfrac != null
                  "
                >
                  <p>填报加扣分：{{ scope.row.tbSzfrac }}</p>
                  <p>原因：{{ scope.row.tbSzfracre }}</p>
                </span>
                <span
                  v-else-if="
                    scope.row.ytbSzfrac != null && scope.row.tbSzfrac == null
                  "
                >
                  <p>预填报加扣分：{{ scope.row.ytbSzfrac }}</p>
                  <p>原因：{{ scope.row.ytbSzfracre }}</p>
                </span>
                <span
                  v-else-if="
                    scope.row.ytbSzfrac == null && scope.row.tbSzfrac != null
                  "
                >
                  <p>填报加扣分：{{ scope.row.tbSzfrac }}</p>
                  <p>原因：{{ scope.row.tbSzfracre }}</p>
                </span>
                <div slot="reference" class="name-wrapper">
                  <span style="color: #ff3300">{{ scope.row.zbDf }}</span>
                </div>
              </el-popover>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="lastPage != 'jghz' && lastPage != 'qtjc'"
          prop="signLevel"
          header-align="center"
          min-width="100"
          align="center"
          label="合同级别"
          :formatter="statusFormater"
        >
        </el-table-column>
        <el-table-column
          prop="auditStatus"
          header-align="center"
          align="center"
          min-width="100"
          label="状态"
          :formatter="tbzbStatusFormater"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="avue-crud__pagination">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
    <div class="text-center" v-if="showBackBtn"></div>
    <el-dialog
      title="输入加扣原因"
      :visible.sync="visible"
      width="700px"
      @close="closeDialog"
    >
      <div>
        <el-form :model="dataFormjia" ref="dataFormjia" label-width="130px">
          <div class="boxsty">
            <div v-if="[1, 2].includes(status)">
              <el-row>
                <el-col>预填报阶段</el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="加扣分值">
                    <el-input v-model="dataFormjia.ytbSzfrac"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="加扣原因">
                    <el-input
                      type="textarea"
                      :rows="4"
                      v-model="dataFormjia.ytbSzfracre"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div v-if="[3, 4].includes(status)">
              <el-row>
                <el-col>填报阶段</el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="加扣分值">
                    <el-input v-model="dataFormjia.tbSzfrac"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="加扣原因">
                    <el-input
                      type="textarea"
                      :rows="4"
                      v-model="dataFormjia.tbSzfracre"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form>
      </div>
      <span slot="footer">
        <el-button
          type="primary"
          plain
          size="small"
          @click="dataFormjiaSubmit(dataFormjia)"
          >确认保存</el-button
        >
        <el-button size="small" @click="closeDialog">关闭窗口</el-button>
      </span>
    </el-dialog>
    <el-dialog title="业绩合同指标库" :visible.sync="dialogVisible" width="80%">
      <zhibiaoTable
        ref="zhibiaoRef"
        :hetongId="hetongId"
        @func="getRow"
      ></zhibiaoTable>
      <span slot="footer" class="dialog-footer">
        <el-button plain type="primary" @click="addZhibiao">添 加</el-button>
        <el-button plain @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchList,
  addObj,
  getObj,
  delObj,
  putObj,
  submitjiaList,
  confirmStatus,
  confirmTianbao,
} from "@/api/hetongrenwu/hetongjgtb";
import {
  fetchListPage,
  tbshokApi,
  tbshokAllApi,
  tbshbackApi,
  tbshbackAllApi,
  getFormula,
} from "@/api/hetongrenwu/hetongyeji/hetongzb";
import { mapGetters } from "vuex";
import ElCol from "element-ui/packages/col/src/col";
import contractDetailHeader from "@/views/hetongrenwu/components/contractDetailHeader";
import zhibiaoTable from "@/views/hetongrenwu/hetong/hetongyeji/zhibiaoTable";
import { saveZB } from "@/api/hetongrenwu/zhibiaoTable";
import { getnormlist } from "@/api/hetongrenwu/hetongzhibiaohz";
import { number } from "echarts";

export default {
  components: { ElCol, contractDetailHeader, zhibiaoTable },
  props: {
    hetongzhibiaoTable: {},
    hetongIds: Number,
  },
  data() {
    return {
      pageTitle: "业绩合同",
      dataList: [],
      dataForm: {
        key: "",
      },
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      radio: "1",
      radioTwo: "1",
      zhibiaoForm: {},
      lastPage: "tbsh",
      showSearch: true,
      showBackBtn: true,
      visible: false,
      dataFormjia: {
        key: "",
      },
      status: Number,
      searchadvanced: true,
      fullscreenLoading: false,
      fullscreenLoading2: false,
      searchheight: "0",
      tbzbStatus: 1,
      formulaOptions: [],
      taskId: 0,
      zbndid: 0,
      dialogVisible: false,
    };
  },
  watch: {
    hetongzhibiaoTable: {
      handler(newVal) {
        //console.log(newVal)
        if (newVal) {
          this.hetongId = newVal.hetongId;
          this.str = newVal.str;
          this.taskId = newVal.taskId;
        }
      },
      deep: true,
      immediate: true,
    },
    radio(value) {
      if (value) {
        this.getDataList();
      }
    },
  },
  created() {
    this.getDataList();
    this.getFormula();
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    addZhibiao() {
      this.$refs.zhibiaoRef.saveZhibiao(this.dataList);
    },
    statusFormater(row, column) {
      const status = row.signLevel;
      if (status == 1) {
        return "一级合同";
      } else if (status == 2) {
        return "二级合同";
      } else if (status == 3) {
        return "三级合同";
      } else if (status == 4) {
        return "四级合同";
      } else if (status == 5) {
        return "五级合同";
      }
    },
    init(data) {
      this.lastPage = data.lastPage;
      this.showSearch = data.showSearch;
      this.pageTitle = data.pageTitle;
      this.showBackBtn = data.showBackBtn;
    },
    showZhibiaoTable() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.zhibiaoRef.init(this.hetongzhibiaoTable.lastPage, 3);
        this.$refs.zhibiaoRef.getDataList();
      });
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      fetchListPage(
        Object.assign({
          current: this.pageIndex,
          size: this.pageSize,
          zhibiaoName: this.dataForm.zhibiaoName,
          zhibiaoType: this.dataForm.zhibiaoType,
          tbzbStatus: this.tbzbStatus,
          htId: this.hetongIds,
          id: this.hetongzhibiaoTable.zbndid,
        })
      ).then((response) => {
        //console.log(response.data)
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
      });
      this.dataListLoading = false;
    },
    // 修改属性
    editProperty(row, index) {
      confirmStatus(this.hetongId).then((response) => {
        //console.log(response.data.data);
        this.status = response.data.data;
        this.$set(this.dataList[index], "isEditPropertyShow", true);
      });
    },
    getRow(rows) {
      console.log(this.hetongIds);
      saveZB({
        rows: rows,
        hetongId: this.hetongIds,
        ndId: this.hetongzhibiaoTable.zbndid,
      }).then((res) => {
        this.dialogVisible = false;
        this.getDataList();
      });
    },
    // 保存属性
    saveProperty(row, index) {
      if (row.zhibiaoType == "奖惩类") {
        getnormlist({ normjks: row.zbDf, normid: row.zhibiaoId }).then(
          (res) => {
            if (res.data.data == 0) {
              this.$confirm(
                "您填写的得分已超出加扣范围，是否继续填写得分！",
                "提示",
                {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                }
              )
                .then((res) => {
                  putObj(row)
                    .then((res) => {
                      this.$message.closeAll();
                      this.$message.success("保存成功！");
                    })
                    .then((res) => {
                      this.getDataList();
                    });
                })
                .catch((res) => {
                  this.getDataList();
                });
            } else {
              putObj(row).then((res) => {
                this.$message.closeAll();
                this.$message.success("保存成功！");
                //刷新列表
                this.getDataList();
              });
            }
          }
        );
      } else {
        putObj(row).then((res) => {
          //刷新列表
          this.getDataList();
        });
      }
    },
    // 取消编辑
    cancelProperty(row, index) {
      this.$set(this.dataList[index], "isEditPropertyShow", false);
      this.getDataList();
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      this.$confirm("是否确认删除ID为" + id, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(id);
        })
        .then((data) => {
          this.$message.closeAll();
          this.$message.success("删除成功");
          this.getDataList();
        });
    },
    //返回原来的页面
    fnBackOldPage(type) {
      this.$emit("fnBackOldPage", type);
    },
    //打开加扣维护弹框
    fnOpenJiaKou(obj) {
      confirmStatus(this.hetongId).then((response) => {
        this.status = response.data.data;
        this.visible = true;
        this.dataFormjia.id = obj.id;
      });
    },
    //关闭加扣维护弹框
    closeDialog() {
      this.visible = false;
      this.$refs["dataFormjia"].resetFields();
    },
    dataFormjiaSubmit(row, index) {
      submitjiaList(row).then((res) => {
        //刷新列表
        this.visible = false;
        this.$refs["dataFormjia"].resetFields();
        this.getDataList();
      });
    },
    confirmTianbao(data) {
      confirmTianbao(data).then((response) => {
        this.$message.closeAll();
        this.$message.success("提交成功");
      });
    },
    tbshok(id) {
      this.$confirm("是否要通过该指标?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          tbshokApi(id)
            .then((res) => {
              this.$message.closeAll();
              this.$message({
                type: "success",
                message: "提交成功!",
              });
              this.getDataList();
            })
            .catch(() => {
              this.$message.closeAll();
              this.$message({
                type: "error",
                message: "提交失败!",
              });
              this.getDataList();
            });
        })
        .catch(() => {
          this.$message.closeAll();
          this.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    tbshback(id) {
      this.$confirm("是否要驳回该指标?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          tbshbackApi(id)
            .then((res) => {
              this.$message.closeAll();
              this.$message({
                type: "success",
                message: "提交成功!",
              });
              this.getDataList();
            })
            .catch(() => {
              this.$message.closeAll();
              this.$message({
                type: "error",
                message: "提交失败!",
              });
              this.getDataList();
            });
        })
        .catch(() => {
          this.$message.closeAll();
          this.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    //批量通过
    tbshokAll() {
      const rows = this.$refs.tableRef.selection;
      if (rows.length > 0) {
        for (var i in rows) {
          if (rows[i].tbzbStatus == 2) {
            this.$message.closeAll();
            this.$message({
              type: "info",
              message: "当前选择数据状态存在已驳回",
            });
            return;
          }
        }
        this.$confirm("是否要通过" + rows.length + "条指标?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.fullscreenLoading = true;
            tbshokAllApi({
              rows: rows,
              streamId: this.hetongzhibiaoTable.streamId,
              programInterface: this.hetongzhibiaoTable.programInterface,
              taskId: this.taskId,
            })
              .then((res) => {
                this.$message.closeAll();
                this.$message({
                  type: "info",
                  message: res.data.data + "条指标已通过",
                });
                this.fullscreenLoading = false;
                this.getDataList();
                this.fnBackOldPage("返回");
              })
              .catch(() => {
                this.$message.closeAll();
                this.$message({
                  type: "error",
                  message: "提交失败!",
                });
                this.fullscreenLoading = false;
                this.getDataList();
                this.fnBackOldPage("返回");
              });
          })
          .catch(() => {
            this.$message.closeAll();
            this.$message({
              type: "info",
              message: "已取消提交",
            });
            this.fnBackOldPage("返回");
          });
      } else {
        this.$message.closeAll();
        this.$message({
          type: "info",
          message: "请选择指标通过!",
        });
      }
    },
    //批量驳回
    tbshbackAll() {
      const rows = this.$refs.tableRef.selection;
      if (rows.length > 0) {
        this.$confirm("是否要驳回" + rows.length + "条指标?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            //console.log("queding")
            this.fullscreenLoading2 = true;
            tbshbackAllApi({
              rows: rows,
              streamId: this.hetongzhibiaoTable.streamId,
              programInterface: this.hetongzhibiaoTable.programInterface,
              ndId: this.hetongzhibiaoTable.zbndid,
              taskId: this.hetongzhibiaoTable.taskId,
            })
              .then((res) => {
                this.$message.closeAll();
                this.$message({
                  type: "info",
                  message: res.data.data + "条指标已驳回",
                });
                this.fullscreenLoading2 = false;
                this.fnBackOldPage("返回");
                this.getDataList();
              })
              .catch(() => {
                this.$message.closeAll();
                this.$message({
                  type: "error",
                  message: "提交失败!",
                });
                this.fullscreenLoading2 = false;
                this.getDataList();
                this.fnBackOldPage("返回");
              });
          })
          .catch(() => {
            this.$message.closeAll();
            this.$message({
              type: "info",
              message: "已取消提交",
            });
            this.fnBackOldPage("返回");
          });
      } else {
        this.$message.closeAll();
        this.$message({
          type: "info",
          message: "请选择指标驳回!",
        });
      }
    },
    showPassData() {
      this.tbzbStatus = 3;
      this.getDataList();
    },
    showFailData() {
      this.tbzbStatus = 1;
      this.getDataList();
    },
    //公式
    getFormula() {
      getFormula().then((res) => {
        this.formulaOptions = res.data.data;
      });
    },
    tbzbStatusFormater(row, column) {
      const auditStatus = row.auditStatus;
      if (auditStatus == 0) {
        return "未提报";
      } else if (auditStatus == 1) {
        return "填报中";
      } else if (auditStatus == 2) {
        return "审核中";
      } else if (auditStatus == 3) {
        return "已经审核";
      } else if (auditStatus == 4) {
        return "审核驳回";
      } else if (auditStatus == 5) {
        return "结果填报中";
      } else if (auditStatus == 6) {
        return "结果填报完成";
      } else if (auditStatus == 7) {
        return "填报审核驳回";
      }
    },
  },
};
</script>
